<template>
	<navbar></navbar>
	<textNavbar myprops="律师解答"></textNavbar>
	<view class="lsjdDa">
		<view class="lsjdDa-top">
			<view class="lsjdDa-top-vw">
				<text>朋友欠钱不还，朋友借钱，让她还钱的时候恶语相向并且拒绝还钱</text>
			</view>
		</view>
		<view class="lsjdDa-content" v-for="item in 3">
			<view class="answer-content-center">
				<view class="answer-content-center-photo">
					<image src="../../../static/首页路径.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
				</view>
				<view class="answer-content-center-view">
					<view class="answer-content-center-text">
						<text style="color: #576b95;">张扬智<text style="color: black; margin: 0 5px; font-size: 22rpx;">律师<text style="color: #9c9d9d; margin-left: 5px; font-size: 26rpx;">福建 厦门</text></text></text>
					</view>
					<text style="color: #9c9d9d;">15小时前</text>
				</view>
			</view>
			<view class="neir">
				<view class="item_name2">
					<text class="item_txt2">你好，这种情况你可以准备起诉状和对方的身份信息，相关的证据材料，向法院起诉对方。需要代写起诉材料，指导诉讼的可以委托本律师。</text>
				</view>
				<view class="item_name1">
					<view class="triangle"></view>
					<text class="item_txt1">我有对方信息, 好的13598609306,你好律师我是xxx,我这边有个问题想请教您</text>
				</view>
			</view>
			<view class="bottom-text"><text>本问答由平台律师提供，仅供公益昔法使用，如有侵权请联系删除。</text></view>
		</view>
		<view class="footer">
			<view class="green">
				<image src="../../../static/白电话.png" mode="" @click="jishi"></image>
				<view class="" style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="wt" @click="weit">
					<text class="wtls">委托律师</text>
					<text class="bendi">本地专家律师1对1</text>
				</view>
				<view style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="wt" @click="mianf">
					<text class="wtls">免费咨询</text>
					<text class="bendi">每天两次免费问</text>
				</view>
				<view style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="right" @click="open">
					<van-icon name="qr" color="white" size="28px"/>
				</view>
			</view>
		</view>
	</view>
	<van-popup
	  :show="show"
	  position="bottom"
		closeable
		round
	  custom-style="height: 40%; background-color: #EDEDED;"
	  @close="onClose">
		<view class="van-popup">
			<text>选择更多法律服务</text>
			<view class="van-popup-view" @click="tiao">
				<view class="van-popup-view-vw">
					<image src="../../../static/白咨询.png" mode=""></image>
					<text>免费咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白私问.png" mode=""></image>
					<text>私问</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白电话.png" mode=""></image>
					<text>电话咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白律师.png" mode=""></image>
					<text>律师约见</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白背章.png" mode=""></image>
					<text>合同审查</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白文书.png" mode=""></image>
					<text>文书代写</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白律师函.png" mode=""></image>
					<text>律师函</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白户籍.png" mode=""></image>
					<text>户籍调查</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白起诉状.png" mode=""></image>
					<text>民事起诉状</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白离婚.png" mode=""></image>
					<text>离婚咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白仲裁.png" mode=""></image>
					<text>劳动仲裁委托</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白委托.png" mode=""></image>
					<text>委托律师</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白工伤.png" mode=""></image>
					<text>工伤赔偿</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白协议.png" mode=""></image>
					<text>合伙协议</text>
				</view>
			</view>
		</view>
	</van-popup>
</template>

<script>
	import tuiDivider from "@/components/thorui/tui-divider/tui-divider.vue"
	export default {
		components:{
				tuiDivider
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			// 跳转到计时电话页
			jishi () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=计时电话"
				})
			},
			// 跳转到委托律师页
			weit () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=委托律师"
				})
			},
			// 跳转到免费咨询页
			mianf () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 打开模态框
			open () {
				this.show = true
			},
			// 关闭模态框
			onClose () {
				this.show = false
			},
			tiao (e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lsjdDa {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
	}
	.lsjdDa-top {
		width: 100vw;
		background-color: white;
		display: flex;
		justify-content: center;
		margin-bottom: 5px;
	}
	.lsjdDa-top-vw {
		width: 90vw;
		font-weight: bold;
		font-size: 15px;
		padding-bottom: 5px;
	}
	
	.lsjdDa-content {
		width: 100vw;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5px;
	}
	
	.answer-content-center {
		// margin-bottom: 16rpx;
		width: 92vw;
		height: 50px;
		display: flex;
		align-items: center;
	}
	.answer-content-center-photo {
		width: 80rpx;
		height: 80rpx;
	}
	.answer-content-center-view {
		font-size: 24rpx;
		margin-left: 8px;
	}
	.answer-content-center-text {
		width: 320rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: normal;
		display: flex;
		justify-content: space-between;
	}
	
	.neir {
		width: 92vw;
		font-size: 14px;
		display: flex;
		flex-direction: column;
	}
	
	.item_name1 {
		width: 99%;
		display: flex;
		flex-direction: row-reverse;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 30rpx;
		color: rgba(0, 0, 0, 1);
		text-align: right;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.item_name2 {
		width: 99%;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 30.48rpx;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		margin-bottom: 30rpx;
	}
	
	.item_txt1 {
		width: 100%;
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
		padding: 12rpx;
		border-radius: 40rpx;
		background: #f0f0f0;
		font-weight: bold;
		text-align: left;
	}
	
	.item_txt2 {
		width: 100%;
		// width: calc(100% - 84rpx);
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
	}
	
	.triangle {
	  position: absolute;
	  top: -8px;
	  right: 0;
	  width: 0;
	  height: 0;
	  border-top: 10px solid transparent; /* 三角形的上边宽高及颜色 */
	  border-left: 10px solid #f0f0f0; /* 三角形的左边宽高及颜色，应与bubble背景色一致 */
	  border-bottom: 10px solid transparent; /* 三角形的下边宽高及颜色 */
		transform: rotateZ(-50deg);
	}
	
	.bottom-text {
		width: 92vw;
		font-size: 11px;
		color: #cdcccc;
		margin-top: 10px;
		padding-bottom: 10px;
	}
	
	.footer {
		width: 100vw;
		height: 70px;
		background-color: white;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.green {
		width: 300px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #1aad19;
		border-radius: 30px;
		margin-right: 15px;
	}
	.green > image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: 5px;
	}
	.green > .wt {
		width: 90px;
		height: 30px;
		font-size: 12px;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wt > .bendi {
		font-size: 10px;
	}
	.right {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 3px;
	}
	
	
	.van-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.van-popup > text {
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.van-popup > .van-popup-view {
		width: 91%;
		height: 91%;
	}
	.van-popup-view {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.van-popup-view-vw > image {
		width: 84rpx;
		height: 84rpx;
	}
	.van-popup-view-vw {
		width: 20%;
		height: 128rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.van-popup-view :nth-child(11) > text {
		width: 144rpx;
	}
	
	.van-popup-view-vw > text {
		font-size: 24rpx;
	}
</style>
